<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="平台名称">
          <el-input v-model="searchInfo.name" placeholder="平台名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button type="primary" icon="plus" @click="openDialog('addApi')">创建</el-button>
      </div>
      <el-table :data="tableData" row-key="id" :tree-props="{ children: 'child', hasChildren: 'hasChild' }">
        <el-table-column align="left" label="平台ID" min-width="150" prop="id" />
        <el-table-column align="left" label="平台名称" min-width="150" prop="name" />
        <el-table-column align="left" label="启用状态" min-width="150">
          <template #default="scope">
            <el-switch v-model="scope.row.status" @change="changeState(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作" min-width="150">
          <template #default="scope">
            <el-button class="edit" @click="fnChange(scope.row, 'edit')">修改</el-button>
            <el-button class="edit" @click="fnChange(scope.row, 'add')">添加子分类</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="page_size"
          :page-sizes="[10, 30, 50, 100]"
          :total="totals"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-drawer
      v-model="dialogFormVisible"
      size="60%"
      :before-close="closeDialog"
      :show-close="false"
    >
      <template #header>
        <span class="text-lg">{{ isChange?"修改":"新增" }}</span>
        <div>
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="enterDialog">确 定</el-button>
        </div>
      </template>
      <el-form ref="platForm" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="平台名称" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import {
  categoryList,
  categoryCreate,
  categoryStatus,
  categoryUpdate
} from "@/api/platform";
import { flatToTree } from "@/utils/format";
import { reactive, ref, watch, onMounted } from "vue";
let searchInfo = reactive({
  name: ""
});
let tableData = ref([]);
let page = ref(1);
let page_size = ref(10);
let totals = ref(0);
let dialogFormVisible = ref(false);
let dialogTitle = ref("新增");
let form = ref({
  name: ""
});
let isChange = ref(false);
const platForm = ref();

const rules = ref({
  name: [{ required: true, message: "请输入平台名称", trigger: "blur" }]
});
onMounted(() => {
  getList();
});
const getList = () => {
  let params = {
    page_size: page_size.value,
    page: page.value,
    name: searchInfo.name
  };
  categoryList(params).then(res => {
    const { data, code } = res;
    const { list = [], total = 0 } = data;
    tableData.value = list || [];
    let temp = tableData.value.map(item => {
      if (item.status === 1) {
        item.status = true;
      } else {
        item.status = false;
      }
      return item;
    });
    tableData.value = flatToTree(temp);
    if (code === 0) {
      totals.value = total || 0;
    }
  });
};
const onReset = () => {
  searchInfo.name = "";
  page.value = 1;
  page_size.value = 10;
  getList();
};
const openDialog = () => {
  isChange.value = false;
  dialogFormVisible.value = true;
};
const closeDialog = () => {
  form.value = {
    name: ""
  };
  platForm.value.resetFields();
  dialogFormVisible.value = false;
};
const handleCurrentChange = val => {
  page.value = val;
  getList();
};
const handleSizeChange = val => {
  page_size.value = val;
  getList();
};
const onSubmit = () => {
  page.value = 1;
  page_size.value = 10;
  getList();
};
const fnChange = (row, type) => {
  console.log(row);
  console.log(type);
  isChange.value = type === "edit" ? true : false;
  form.value =
    type === "edit"
      ? JSON.parse(JSON.stringify(row))
      : { name: "", pid: row.id };
  console.log(form.value);

  dialogFormVisible.value = true;
};
const changeState = row => {
  console.log(row);
  let params = {
    id: row.id,
    name: form.name,
    pid: row.pid,
    status: row.status ? 1 : 2
  };
  categoryStatus(params)
    .then(res => {
      if (res.code === 0) {
        getList();
      }
    })
    .catch(err => {
      console.log(err);
      getList();
    });
};
const enterDialog = () => {
  platForm.value.validate(async valid => {
    if (valid) {
      console.log(isChange.value);
      if (!isChange.value) {
        let params = {
          name: form.value.name,
          pid:
            form.value.pid || form.value.pid === 0 ? form.value.pid : undefined
        };
        categoryCreate(params).then(res => {
          if (res.code === 0) {
            ElMessage({
              type: "success",
              message: res.msg ? res.msg : "新增成功"
            });
            closeDialog();
            page.value = 1;
            page_size.value = 10;
            getList();
          }
        });
      } else {
        let params = {
          id: form.value.id ? form.value.id : undefined,
          name: form.value.name,
          status: form.value.status ? 1 : 2,
          pid: form.value.pid
        };
        categoryUpdate(params).then(res => {
          if (res.code === 0) {
            ElMessage({
              type: "success",
              message: res.msg ? res.msg : "修改成功"
            });
            closeDialog();
            page.value = 1;
            page_size.value = 10;
            getList();
          }
        });
      }
    }
  });
};
</script>
<style lang="scss"></style>
